<template>
  <div class="scatter-pass" id="through-scatter"></div>
</template>

<script>
import { Scatter } from "@antv/g2plot";
export default {
  name: "ThroughScatter",
  props: {
    throughPass: {
      type: Array,
      default() {
        return [];
      },
    },
    playerName: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      scatterPlot: null,
    };
  },
  watch: {
    playerName(newName, oldName) {
      console.log(newName);
      this.scatterPlot.update({
        sizeField: "playerName",
        size: ({ playerName }) => {
          if (playerName === newName) {
            return 2;
          }
          return 1;
        },

        colorField: "playerName", // 部分图表使用 seriesField
        color: ({ playerName }) => {
          if (playerName === newName) {
            return "red";
          }
          return "#D3D3D3";
        },

        //下面的x,y参数必须加个中括号，不然会报类型错误？
        pointStyle: ({ playerName }) => {
          if (playerName === newName) {
            return {
              fill: "red",
              stroke: "red",
            };
          }
          return {
            fill: "#D3D3D3",
            stroke: "#D3D3D3",
          };
        },
      });
    },
  },
  mounted() {
    let data = this.throughPass;
    //传过来的百分比给的是小数
    data.map((item) => {
      item.throughPassAccuracy = parseInt(item.throughPassAccuracy * 100);
    });
    let current_player_name = this.playerName;
    this.scatterPlot = new Scatter("through-scatter", {
      data,
      xField: "throughPassTotal",
      yField: "throughPassAccuracy",
      meta: {
        throughPassTotal: {
          alias: "直塞总数",
          formatter: (v) => {
            return v + "次";
          },
        },
        throughPassAccuracy: {
          alias: "成功率",
          formatter: (v) => {
            return v + "%";
          },
        },
        playerName: {
          alias: "球员姓名",
        },
      },
      xAxis: {
        min: 0,
        max: 30,
        tickInterval: 10,
        grid: null,
        label: {
          formatter: (v) => {
            if (v === "30次") {
              return v;
            }
            return parseInt(v);
          },
        },
      },
      yAxis: {
        minLimit: 0,
        maxLimit: 100,
        tickInterval: 10,
        grid: null,
        tickLine: {
          style: {
            stroke: "#D3D3D3",
            lineWidth: 2,
          },
          length: 4,
        },
        line: {
          style: {
            stroke: "#D3D3D3",
            lineWidth: 2,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
        },
        label: {
          formatter: (v) => {
            if (v === "100%") {
              return v;
            }
            return parseInt(v);
          },
        },
      },
      // size: 1,

      sizeField: "playerName",
      size: ({ playerName }) => {
        if (playerName === current_player_name) {
          return 2;
        }
        return 1;
      },

      colorField: "playerName", // 部分图表使用 seriesField
      color: ({ playerName }) => {
        if (playerName === current_player_name) {
          return "red";
        }
        return "#D3D3D3";
      },
      legend: false,
      //下面的x,y参数必须加个中括号，不然会报类型错误？
      pointStyle: ({ playerName }) => {
        if (playerName === current_player_name) {
          return {
            fill: "red",
            stroke: "red",
          };
        }
        return {
          fill: "#D3D3D3",
          stroke: "#D3D3D3",
        };
      },
      tooltip: {
        fields: ["playerName", "throughPassTotal", "throughPassAccuracy"],
        domStyles: {
          "g2-tooltip": {
            width: "220px",
            height: "80px",
          },
          "g2-tooltip-list-item": {
            // backgroundColor:'blue',
            display: "flex",
            // justifyContent:'Center'
          },
          "g2-tooltip-name": {
            width: "100px",
            textAlign: "left",
            // backgroundColor:'red',
          },
          "g2-tooltip-value": {
            width: "80px",
            textAlign: "left",
            // backgroundColor:'red',
          },
          "g2-tooltip-marker": {
            width: "15px",
            marginTop: "3px",
          },
        },
        position: "left",
        offset: 30,
      },
    });
    this.scatterPlot.render();
  },
};
</script>

<style scoped>
.scatter-pass {
  margin-top: -1px;
  width: 240px;
  height: 180px;
}
</style>
